iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
1
自我挑戰組

Vue.js 初學筆記系列 第 1

01. Vue 就決定是你了!

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20190912/20120340SlzQzq2cyx.png

為什麼決定是 Vue.js ?

  1. 提高可閱讀性
    • 程式邏輯與視圖邏輯完全分開
  2. 可深可淺的漸進式框架
    • 初學可僅以代替原生 javascript 或 jQuery 為目標
    • 進階可分別以 vue-router, vuex, vue-test-utils 處理客戶端路由、狀態管理、組件的單元測試
  3. 簡單輕便、可維護性與可測試性高
    • 體積小、反應快
    • 只專注在視圖層(view layer)
    • 官方文件詳盡
    • vue-cli 的單文件組件容易從文件拆開與導入其他文件,組件裡的 html, css, javascript 獨立成一個可複用 的.vue
  4. 響應性
    • 數據一旦被更改, html 文件內所有用到的數據會一起做更新

安裝 Vue.js

外部引入

初步學習可以直接外部引入,配合新手指南服用。

<!--開發環境版本,有除錯提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--生產環境版本,體積更小速度更快,產品上線用-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue CLI

高手向,搭建腳手架,用基礎化的構建工具管理大型項目狀態,方便處理單文件組件、插件的銜接。安裝 Vue CLI 需要 Node.js 8.9 以上的版本。這裡先只提供練習用的 cmd 的 npm 的建置懶人包,日後有機會再詳盡解釋。

# 先 CD 移動到根目錄,還不用創建專案資料夾

npm install -g @vue/cli

vue init webpack 項目名稱

# 接下來會詢問專案設定,依據狀況需要填寫資料與回答是否 Y/N

瀏覽器安裝 Vue.js devtools

實用的 chrome 與 firefox 套件,可以方便檢查元件裡面的資料,觀察 vue 實體的信息與狀態,這個筆記以 chrome 為主。

之後在瀏覽器中開發者工具就能找到 vue 的頁簽

https://ithelp.ithome.com.tw/upload/images/20190912/20120340chaeUB5dEv.jpg


這個筆記將來寫什麼

只取小弟所需 vue 重點式基本觀念與範例整理,以便日後備忘。就如其名,只是個初學筆記。

鐵人賽 30 天規劃

僅供參考,盡力跟日程表所計畫的一樣。

  • 上旬 - Vue.js 基本語法
  • 中旬 - 組件與 vue-router
  • 下旬 - 架構友好商店線上網頁
    https://ithelp.ithome.com.tw/upload/images/20190912/20120340G3p1fngs4T.png
    目標是精靈球營業額突破 3 億(遊戲幣)

當前框架與函式庫版本

2019 年 9 月 12 日的這個時候

  • Vue.js 的最新穩定版本是 2.16.10
  • jQuery 3.4.1
  • Bootstrap 4.3.1 (還有他需要的 popper.js 是 1.14.7)
  • Font Awesome 5.10.2

最後

菜鳥上路挑戰寫文,諸多不周還請各方大大包涵指教。


下一篇
02. Vue 的聲明式渲染、樣板與資料
系列文
Vue.js 初學筆記10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言